<template>
  <div class="cleaning_1">
    <div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          color: #fff;
          height: 75px;
          letter-spacing: 5px;
        "
      >
        历史订单
      </div>
    </div>
    <van-search
      @clear="GetXX"
      @search="GetXX"
      margin="0 10px 20px 10px"
      height="40px"
      shape="round"
      :showAction="false"
      placeholder="请输入订单号、手机号或姓名关键词信息"
      v-model="orderNumber"
    ></van-search>
    <div class="list_outside">
      <div class="list_head">共{{ total }}个订单</div>
      <van-pull-refresh class="pull-refresh" v-model="refreshing" @refresh="onRefresh">
        <van-empty v-if="goodList.length == 0 && !error" image="search" description="未找到数据" />
        <van-empty v-if="error" image="error" description="网络错误" />
        <van-list
          style="margin-top: 10px; margin-bottom: 100px"
          :immediate-check="false"
          :loading="loading"
          :finished="finished"
          :error="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="queryList"
        >
          <div class="list" v-for="(item, index) in goodList" :key="index" @click="TZXQ(item)">
            <div class="order_list">
              <div style="display: flex; justify-content: space-between">
                <div style="width: 100%">
                  <div class="title" style="display: flex; justify-content: space-between">
                    <div style="display: flex">
                      <van-icon name="calendar-fill" color="#00BAAD" size="28"></van-icon>
                      <span
                        style="color: #00baad; font-size: 18px; line-height: 30px; margin-top: 10px"
                        >{{ item.orderType }}</span
                      >
                    </div>
                    <div class="title_state">
                       <van-image
                    v-if="item.orderStatus == 0"
                    radius="4"
                    class="img"
                    :src="require('../imgs/SY.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-image
                    v-if="item.orderStatus == -1"
                    radius="4"
                    class="img"
                    :src="require('../imgs/QX.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-image
                    v-if="item.orderStatus == 2"
                    radius="4"
                    class="img"
                    :src="require('../imgs/SH.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-image
                    v-if="item.orderStatus == 1"
                    radius="4"
                    class="img"
                    :src="require('../imgs/WC.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-image
                    v-if="item.orderStatus == 3"
                    radius="4"
                    class="img"
                    :src="require('../imgs/PJ.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-tag
                    class="img BHtag"
                    v-if="item.orderStatus == 4"
                    type="primary"
                    color="#ffe1e1"
                    text-color="#ad0000"
                  >
                    <p class="yuan"></p>
                    已驳回
                  </van-tag>
                    </div>
                  </div>
                  <div class="item">
                    <span style="color: #606266">姓名：</span>
                    <span>{{ item.userName }}</span>
                  </div>
                  <div class="item">
                    <span style="color: #606266">订单号：</span>
                    <span>{{ item.orderNumber }}</span>
                  </div>
                  <div class="item">
                    <span style="color: #606266">下单时间：</span>
                    <span>{{ item.creationTime }}</span>
                  </div>
                  <div class="item_cancel" v-if="orderStatus == '0'">
                    <div style="width: 100px">
                      <van-button @click="QXDD(item)" size="small" type="warning"
                        >取消订单</van-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <template #error>
            <div class="error-tip" @click="retryLoad">
              <van-icon name="warning" />
              <span>加载失败，点击重试</span>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getServiceOrderAdminList } from "@/api/realAssets/icsharedstation/DD/index.js"
import { getpersonalInformation } from "../../common/RYXX"

export default {
  data () {
    return {
      title: "订单管理",
      total: 0,
      orderList: [],
      orderStatus: "-1,1,3",
      postId: JSON.parse(getpersonalInformation()).postId,
      orderNumber: "", // 可接收订单编号手机号姓名
      refreshing: false,
      loading: false,
      finished: false,
      error: false,
      goodList: [],
      tabList: [
        {
          name: "待使用",
          orderStatus: "0"
        },
        {
          name: "已取消",
          orderStatus: "-1"
        },
        {
          name: "已完成",
          orderStatus: "1"
        },
        {
          name: "待审核",
          orderStatus: "2"
        },
        {
          name: "全部",
          orderStatus: "-1,0,1,2,3,4"
        }
      ],
      pageData: {
        pageNumber: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    TZXQ(val) {
      let li = encodeURIComponent(JSON.stringify(val))
      this.$router.push("/pages/AdminPages/DDXQ/index?YYXQxx=" + li)
    },
    GetXX() {
      this.queryList()
    },
    tabChange(item) {
      this.orderStatus = item.orderStatus
      this.queryList()
    },
    queryList() {
      this.loading = true
      if (this.error) return // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.goodList = []
      }
      getServiceOrderAdminList({
        userId: JSON.parse(getpersonalInformation()).userId,
        orderStatus: this.orderStatus,
        postId: this.postId,
        pageNumber: this.pageData.pageNumber,
        pageSize: this.pageData.pageSize,
        siteId: "",
        orderNumber: this.orderNumber,
        orderTime: ""
      })
        .then((res) => {
          this.loading = false
          if (res.resultMessage != "SUCCESS") {
            this.goodList = []
            this.error = true // 显示错误提示
          } else if (res.data.length == 0) {
            this.goodList = []
            this.finished = true
          } else {
            this.total = res.pageNum
            let dataList = res.data
            this.goodList = [...this.goodList, ...dataList]
            console.log(this.goodList)
          }
          // 判断是否已加载完所有数据
          if (this.goodList.length == res.pageNum) {
            this.finished = true
          } else {
            this.pageData.pageNumber++
          }
          this.refreshing = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onRefresh() {
      this.goodList = []
      this.pageData.pageNumber = 1
      this.pageData.pageSize = 10
      this.finished = false
      this.error = false
      this.loading = true
      this.refreshing = true
      this.queryList()
    },
    retryLoad() {
      this.error = false
      this.loading = true
      this.queryList()
    }
  },
  mounted() {
    this.queryList()
  }
}
</script>

<style lang="less" scoped>
@import "../../static/css/index.less";
.cleaning_1 {
  height: 100%;
  width: 100%;
  background: url("../../static/Homeimg/SYBJ1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.list_outside {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #fff;
  padding-bottom: 15px;
}

.list_head {
  margin: 0 0 10px 20px;
  padding-top: 10px;
  color: #999999;
  font-size: 14px;
}

.list {
  padding: 0px 10px 10px 10px;
  box-sizing: border-box;
}

.order_list {
  border-radius: 10px;
  padding: 0px 10px 10px 10px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;

  .item {
    font-size: 15px;
    margin: 5px 0 5px 0;
  }

  .item_cancel {
    display: flex;
    flex-direction: row-reverse;
  }
}

.custom-style {
  color: #fff;
  background: #36c2a8;
}
.van-search {
  background: none;
}
.pull-refresh {
  height: calc(
    var(--real-vh, 1vh) * 100 - 210px - env(safe-area-inset-bottom) - env(safe-area-inset-top)
  );
  padding-top: 10px;
  box-sizing: border-box;
}
.title_state{
  margin: 10px;
}
</style>
